<!--
 * @Author: wuwle
 * @Date: 2020-10-07 22:05:50
 * @LastEditors: wuwle
 * @LastEditTime: 2021-07-16 16:08:21
 * @FilePath: \demo\复习\css\案例\flex\flex.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p {
        margin: 0;
      }
      div {
        width: 500px;
        height: 300px;
        border: 1px solid red;
        display: flex;
        /* 默认水平方向 */
        flex-direction: column;
        justify-content: center;
        /* min-width: 100px; */
        /* justify-content: end; */

        /* 要加flex-,end才有效 */
        /* justify-content: flex-end; */

        /* justify-content: space-between; */
        /* justify-content: space-around;/ */

        /* 这里srectch设置的是水平排列是默认垂直方向和父盒子高度一样 */
        /* 垂直时宽度和父盒子一样 */
        /* align-items: stretch; */
        /* align-items: center; */
        /* align-items: baseline; */
        /* flex-wrap: wrap; */
        /* flex-wrap: wrap-reverse; */
      }
      /* div::before,
  div::after {
    content:""
  } */
      p:nth-child(1) {
        background-color: red;
        /*水平排列： 不加flex默认内容宽度 */
        /* 垂直：不加flex高度默认内容 */
        /* flex: 1; */
        /* oder指定排列顺序 */
        /* order: 1; */
        font-size: 14px;
      }
      p:nth-child(2) {
        background-color: blue;
        /* flex:2 */
        font-size: 16px;
      }
      p:nth-child(3) {
        background-color: yellow;
        font-size: 18px;
      }
      p:nth-child(4) {
        background-color: yellow;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <div>
      <p>foor</p>
      <p>fo一样r</p>
      <p>dgjd</p>
      <p>哈哈</p>
    </div>
  </body>
</html>
